<template>
  <div class="page-score-prod-info mod-prod-info">
    <!-- 步骤 -->
    <div class="post-step">
      <div
        class="step-item"
        :class="{ 'active': postingSteps === 1 || postingSteps === 2 }"
      >
        <!-- 01、选择商品类目 -->
        <div class="step-txt">
          01、{{ $t("product.selectProductCategory") }}
        </div>
      </div>
      <div
        class="step-item"
        :class="{ 'active': postingSteps === 2 }"
      >
        <!-- 02、编辑商品信息 -->
        <div class="step-txt">
          02、{{ $t("product.editProductInfo") }}
        </div>
      </div>
    </div>

    <!-- 基本信息  -->
    <div
      v-if="postingSteps === 1"
      class="title"
    >
      {{ $t('shopProcess.basicInfo') }}
    </div>

    <!-- <div class="title">新增积分商品</div> -->
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="auto"
      label-position="right"
    >
      <!-- 选择语言 -->
      <el-form-item
        v-show="postingSteps === 1"
        v-if="langItemList.length > 1"
        :label="$t('product.selectLanguage')"
      >
        <div>
          <el-select
            v-model="curLang"
            multiple
            :placeholder="$t('product.tip1')"
            class="select-lang"
            @change="onSelectLang"
          >
            <el-option
              v-for="item in langItemList"
              :key="item.lang"
              :label="item.name"
              :value="item.lang"
            />
          </el-select>
          <div class="el-form-item-tips">
            {{ $t("product.postProductTips2") }}
          </div>
        </div>
      </el-form-item>

      <!-- 商品名称 -->
      <div
        v-show="postingSteps === 1"
        class="prod-name-box"
      >
        <template
          v-for="(item, index) in dataForm.prodLangList"
          :key="index"
        >
          <el-form-item
            :label="$t('product.prodName') + (langItemList.length === 1 ? '' : `(${item.langName})`)"
            class="prod-name-con is-required"
          >
            <div>
              <el-input
                v-model.trim="item.prodName"
                class="prod-name-input"
                maxlength="60"
              />
              <div class="el-form-item-tips">
                {{ $t("product.prodNameTip") }}
              </div>
            </div>
          </el-form-item>
        </template>
      </div>
      <!-- 商品卖点 -->
      <div
        v-show="postingSteps === 1"
        class="prod-name-box"
      >
        <template
          v-for="(item, index) in dataForm.prodLangList"
          :key="index"
        >
          <el-form-item
            :label="$t('product.productSellingPoints') + (langItemList.length === 1 ? '' : `(${item.langName})`)"
            class="prod-name-con"
          >
            <div>
              <el-input
                v-model="item.brief"
                maxlength="100"
              />
              <div class="el-form-item-tips">
                {{ $t("product.productSellingPointsTip") }}
              </div>
            </div>
          </el-form-item>
        </template>
      </div>
      <el-form-item
        v-show="postingSteps === 1"
        :label="$t('discount.commodityPictures')"
        class="productImg-label"
      >
        <!-- <mul-pic-upload v-model="dataForm.imgs" /> -->
        <div>
          <imgs-upload v-model="dataForm.imgs" />
          <span>{{ $t("platform.recommImgSize") }}800*800，{{ $t("product.picUploadTips") }}</span>
        </div>
      </el-form-item>
      <el-form-item
        v-show="postingSteps === 1"
        :label="$t('product.video')"
      >
        <video-upload v-model="dataForm.video" />
      </el-form-item>

      <!-- 规格库存 -->
      <div
        v-if="postingSteps === 1"
        class="title"
      >
        {{ $t('prodSku.specStock') }}
      </div>
      <sku-tag
        v-show="postingSteps === 1"
        ref="skuTagRef"
        :sku-list="dataForm.skuList"
        @change="onSkuTagChangeSkuHandler"
      />
      <sku-table
        v-show="postingSteps === 1"
        ref="skuTableRef"
        v-model="dataForm.skuList"
        v-model:prod-name-cn="prodNameCn"
        v-model:prod-name-en="prodNameEn"
        :prod-lang-list="dataForm.prodLangList"
      />

      <!-- 运费 -->
      <div
        v-if="postingSteps === 1"
        class="title"
      >
        {{ $t('freight.shippinngs') }}
      </div>
      <prod-transport
        v-show="postingSteps === 1"
        v-model="dataForm.deliveryTemplateId"
        v-model:dataForm="dataForm"
      />

      <!-- 商品详情 -->
      <el-tabs
        v-show="postingSteps === 2"
      >
        <el-tab-pane
          v-for="(item, index) in dataForm.prodLangList"
          :key="index"
          :label="`${item.langName}详情`"
        >
          <el-form-item>
            <div class="prod-det-box">
              <div class="prod-content">
                <tiny-mce
                  ref="contentRef"
                  v-model="item.content"
                  :height="600"
                />
              </div>

              <!-- 详情预览 -->
              <div class="details-preview">
                <div class="preview-box-title">
                  详情页预览图
                </div>
                <div
                  v-rich="item.content"
                  class="preview-con"
                />
              </div>
            </div>
          </el-form-item>
        </el-tab-pane>
        <!-- <el-tab-pane label="English Information">
          <el-form-item label="Product Details" prop="contentEn">
            <tiny-mce v-model="contentEn" ref="contentRef" style="width:95%"></tiny-mce>
          </el-form-item>
        </el-tab-pane> -->
      </el-tabs>
    </el-form>

    <!-- 底部固定操作栏 -->
    <div class="prod-footer">
      <div class="foot">
        <div class="inner">
          <div v-if="postingSteps === 1">
            <div
              class="default-btn save-btn"
              @click="onSubmit"
            >
              {{ $t("product.saveBtn1") }}
            </div>
            <div
              class="default-btn primary-btn"
              @click="onNextStep"
            >
              {{ $t("product.nextStep2") }}
            </div>
          </div>
          <div v-if="postingSteps === 2">
            <div
              class="default-btn save-btn"
              @click="onPrevStep"
            >
              {{ $t("product.prevStep") }}
            </div>
            <div
              class="default-btn primary-btn"
              @click="onSubmit"
            >
              {{ $t("product.saveBtn1") }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import SkuTag from './components/sku-tag.vue'
import SkuTable from './components/sku-table.vue'
import ProdTransport from './components/prod-transport.vue'
const emit = defineEmits(['refreshDataList'])

const curLang = ref([1])
const postingSteps = ref(1)
const prodNameEn = ref('')
const prodNameCn = ref('')
// 规格列表
const dataForm = ref({
  tableRate: -1, // 0 包邮 -1 固定运费 大于0运费模板id
  prodName: '',
  brief: '',
  pic: '',
  imgs: '',
  video: '',
  categoryId: useRoute().query.categoryId ? parseInt(useRoute().query.categoryId) : null,
  shopCategoryId: null, // 商城分类id
  prodId: 0,
  brandId: 0,
  prodScore: 0,
  scorePrice: 0,
  skuList: [],
  scoreProdType: 0,
  content: '',
  brandName: '',
  deliveryMode: {},
  isCheck: false,
  value: false,
  deliveryAmount: 0.01, // 统一运费的金额
  deliveryTemplateId: null,
  prodLangList: []
})
const deliveryMode = reactive({
  hasShopDelivery: true,
  hasUserPickUp: false,
  hasCityDelivery: false
})
const brandName = ref('')
let isSubmit = false
// 语言列表
const langItemList = ref([])
const masterLangInfo = reactive({ name: '', lang: '' })

let value = ''
let isCheck = ''

watch(() => dataForm.value.imgs,
  (newV, oldV) => {
    if (newV.split(',').length > 9) {
      dataForm.value.imgs = oldV
      errorMsg($t('product.downloadTemplateTips3'))
    }
  },
  {
    deep: true, // 深度监听设置为 true
    immediate: true
  })

onMounted(() => {
  dataForm.value.prodId = useRoute().query.prodId
  // getCategoryList()
  // getCategoryTree()
  getDataList()
})

const getLangList = () => {
  http({
    url: http.adornUrl('/sys/lang'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    if (data) {
      const info = data
      masterLangInfo.name = info.name
      masterLangInfo.lang = info.lang
      langItemList.value = info.langItemList

      if (!dataForm.value.prodLangList.length) {
        onSelectLang([info.lang])
      } else {
        const curLang = []
        let masterInfo = null
        // 将主语言信息移到第一个
        for (let i = 0; i < dataForm.value.prodLangList.length; i++) {
          const prodLang = dataForm.value.prodLangList[i]
          if (i !== 0 && prodLang.lang === info.lang) {
            masterInfo = prodLang
            dataForm.value.prodLangList.splice(i, 1)
            break
          }
        }
        if (masterInfo) {
          dataForm.value.prodLangList.unshift(masterInfo)
        }
        // 设置langName并且获取当前语言的信息
        dataForm.value.prodLangList.forEach((item) => {
          const fd = langItemList.value.find(f => f.lang === item.lang)
          if (fd) {
            item.langName = fd ? fd.name : ''
            curLang.push(item.lang)
          }
        })
        onSelectLang(curLang)
      }
    }
  })
}
// 上一步
const onPrevStep = () => {
  postingSteps.value = 1
}
// 下一步
const dataFormRef = ref(null)
const onNextStep = () => {
  dataFormRef.value?.validate((valid) => {
    if (!valid) return
    // 规格验证
    if (!skuTagRef.value.vaildSkuTag()) return
    const langList = dataForm.value.prodLangList
    for (const item of langList) {
      if (!item.prodName) {
        errorMsg($t('product.pleComProdName'))
        return
      }
    }
    // 运费处理
    dataForm.value.deliveryTemplateId = dataForm.value.tableRate < 1 ? dataForm.value.tableRate : dataForm.value.deliveryTemplateId
    // 运费处理
    if (dataForm.value.deliveryTemplateId !== -1) {
      dataForm.value.deliveryAmount = null
    }
    if (!dataForm.value.imgs) {
      errorMsg($t('product.choosePicUpload'))
      return
    }
    if (!dataForm.value.skuList.find(el => el.status)) {
      // 至少要启用一种商品规格
      ElMessage({
        message: $t('product.enableSpec'),
        type: 'error',
        duration: 1000
      })
      return
    }
    // 检验是否有选择品牌
    // if (!dataForm.value.brandName) {
    //   errorMsg('请选择一个所属品牌')
    //   return
    // }
    // 校验sku列表
    checkSkuList()
    if (isCheck) {
      errorMsg(value)
      return
    }

    // if (!prodNameEn) {
    //   prodNameEn = prodNameCn
    // }
    // if (/^\s+$/g.test(prodNameEn)) {
    //   prodNameEn = prodNameCn
    // }
    // if (/^\s+$/g.test(briefEn) || /^\s+$/g.test(briefCn)) {
    //   errorMsg($t('shopProcess.inputAllSpace'))
    //   return
    // }
    if (dataForm.value.deliveryTemplateId === null) {
      errorMsg($t('product.pleShgTlate'))
      return
    }
    postingSteps.value = 2
  })
}
/**
 * 选择语言(中文信息必填)
 */
const onSelectLang = (value) => {
  curLang.value = JSON.parse(JSON.stringify(value))
  if (!value.length) {
    curLang.value = [masterLangInfo.lang]
    return
  }
  // 设置主语言不可删除
  if (!curLang.value.includes(masterLangInfo.lang)) {
    curLang.value.unshift(masterLangInfo.lang)
  }

  // 所选语言改变
  const tempArr = dataForm.value.prodLangList.filter(item => curLang.value.includes(item.lang))

  curLang.value.forEach((item, index) => {
    if (!tempArr.find(f => f.lang == item)) {
      const fd = langItemList.value.find(it => it.lang === item)
      if (fd) {
        tempArr.splice(index, 0, { langName: fd.name, brief: '', content: '', lang: item, prodId: dataForm.value.prodId, prodName: '' })
      }
    }
  })
  dataForm.value.prodLangList = tempArr

  // sku列表变化
  const unSelLang = langItemList.value.map(m => !curLang.value.includes(m.lang))
  dataForm.value.skuList.forEach(sku => {
    for (const lang of unSelLang) {
      sku[`prodName_${lang}`] = ''
    }
  })
}

// 获取分类数据
const skuTagRef = ref(null)
const skuTableRef = ref(null)
const getDataList = () => {
  isSubmit = false
  if (dataForm.value.prodId) {
    // 获取产品数据
    http({
      url: http.adornUrl(`/platform/scoreProduct/info/${dataForm.value.prodId}`),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      dataForm.value = data
      // 获取语言列表
      getLangList()

      // 运费选项处理
      if (dataForm.value.deliveryTemplateId < 1) {
        // dataForm.value.tableRate = dataForm.value.deliveryTemplateId
        dataForm.value.tableRate = dataForm.value.deliveryTemplateId
        dataForm.value.deliveryTemplateId = null
      } else {
        // dataForm.value.tableRate = 1
        dataForm.value.tableRate = 1
      }
      dataForm.value.deliveryMode = JSON.parse(data.deliveryMode)
      dataForm.value.deliveryMode.hasShopDelivery = true
      if (data.brand) {
        dataForm.value.brandId = data.brand.brandId
        dataForm.value.brandName = data.brand.brandName
        brandName.value = data.brandName
      }

      dataForm.value.skuList.forEach(sku => {
        sku.oriStock = sku.stocks
        sku.changeStock = sku.stocks
        if (sku.skuLangList) {
          sku.skuLangList.forEach(skulang => {
            sku[`prodName_${skulang.lang}`] = skulang.prodName
          })
        }
      })
      skuTagRef.value.init(data.skuList)
      skuTableRef.value.init(dataForm.value.skuList)
    })
  } else {
    nextTick(() => {
      dataFormRef.value?.resetFields()
      skuTagRef.value?.init()
      dataForm.value.pic = ''
      dataForm.value.imgs = ''
      dataForm.value.video = ''
    })
    // 获取语言列表
    getLangList()
  }
}
// 表单提交
const Router = useRouter()
const commonStore = useCommonStore()
const onSubmit = () => {
  dataFormRef.value?.validate((valid) => {
    if (!valid) return
    // 规格验证
    if (!skuTagRef.value.vaildSkuTag()) return
    const langList = dataForm.value.prodLangList
    for (const item of langList) {
      if (!item.prodName) {
        errorMsg($t('product.pleComProdName'))
        return
      }
    }
    // 运费处理
    dataForm.value.deliveryTemplateId = dataForm.value.tableRate < 1 ? dataForm.value.tableRate : dataForm.value.deliveryTemplateId
    // 运费处理
    if (dataForm.value.deliveryTemplateId !== -1) {
      dataForm.value.deliveryAmount = null
    }
    if (!dataForm.value.imgs) {
      errorMsg($t('product.choosePicUpload'))
      return
    }
    if (!dataForm.value.skuList.find(el => el.status)) {
      // 至少要启用一种商品规格
      ElMessage({
        message: $t('product.enableSpec'),
        type: 'error',
        duration: 1000
      })
      return
    }
    // 检验是否有选择品牌
    // if (!dataForm.value.brandName) {
    //   errorMsg('请选择一个所属品牌')
    //   return
    // }
    // 校验sku列表
    checkSkuList()
    if (isCheck) {
      errorMsg(value)
      return
    }
    // if (/^\s+$/g.test(briefEn) || /^\s+$/g.test(briefCn)) {
    //   errorMsg($t('shopProcess.inputAllSpace'))
    //   return
    // }
    if (dataForm.value.deliveryTemplateId === null) {
      errorMsg($t('product.pleShgTlate'))
      return
    }
    dataForm.value.prodName = dataForm.value.prodLangList[0].prodName || ''
    const param = Object.assign({}, dataForm.value)
    // 设置价格和库存
    paramSetPriceAndStocks(param)
    param.deliveryMode = undefined
    param.deliveryModeVo = deliveryMode
    dataForm.value.skuList.forEach(item => {
      item.changeStock = item.stocks - item.oriStock
    })
    // 商品主图
    param.pic = dataForm.value.imgs.split(',')[0]
    if (isSubmit) {
      return false
    }
    // 设置不同语言的sku名称
    dataForm.value.skuList.forEach(sku => {
      const skuLangList = []
      sku.prodName = sku[`prodName_${masterLangInfo.lang}`]
      const properties = sku.properties.split(';')
      sku.skuName = ''
      for (const propertiesKey in properties) {
        sku.skuName += properties[propertiesKey].substring(properties[propertiesKey].indexOf(':') + 1) + ' '
      }
      for (const lang of curLang.value) {
        skuLangList.push({
          lang,
          prodName: sku[`prodName_${lang}`],
          properties: sku.properties,
          skuId: sku.skuId,
          skuName: sku.skuName
        })
      }
      sku.skuLangList = skuLangList
    })
    // if (1) {
    //   return
    // }

    isSubmit = true
    http({
      url: http.adornUrl('/platform/scoreProduct'),
      method: param.prodId ? 'put' : 'post',
      data: http.adornData(param)
    }).then(() => {
      ElMessage({
        message: $t('remindPop.success'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          commonStore.removeMainActiveTab()
          Router.push('/member/score/prod/list')
          emit('refreshDataList')
        }
      })
    }).catch((e) => {
      isSubmit = false
    })
  })
}

const checkSkuList = () => {
  // 编码是否重复
  const partyCodes = dataForm.value.skuList.filter(el => el.partyCode).map(el => el.partyCode) || []
  if (partyCodes.length && new Set(partyCodes).size !== partyCodes.length) {
    isCheck = true
    value = $t('product.postProductTips16')
    return false
  }
  dataForm.value.skuList.forEach(item => {
    isCheck = false
    if (!item.price && item.price !== 0) {
      isCheck = true
      value = $t('product.emptyPrice')
      return false
    }
    if (!item.oriPrice && item.oriPrice !== 0) {
      isCheck = true
      value = $t('product.emptyMarketValue')
      return false
    }
    if (!item.skuScore) {
      isCheck = true
      value = $t('product.emptyScorePrice')
      return false
    }
    if (item.stocks === null || item.stocks === undefined) {
      isCheck = true
      value = $t('product.emptyStocks')
      return false
    }
  })
}
const paramSetPriceAndStocks = (param) => {
  // 获取规格属性信息
  // param.skuList = prodSpecRef.value?.getTableSpecData()
  // 商品库存
  param.totalStocks = 0
  // 商品价格
  param.price = param.skuList[0].price
  // 商品原价
  param.oriPrice = ''
  // 商品积分价格
  param.scorePrice = param.skuList[0].skuScore
  // 商品实际库存
  for (let i = 0; i < param.skuList.length; i++) {
    const element = param.skuList[i]
    if (element.status !== 1) {
      continue
    }
    if (i === 0) {
      param.price = element.price ? Number.parseFloat(element.price) : 0
      param.scorePrice = element.skuScore ? Number.parseFloat(element.skuScore) : 0
      param.oriPrice = element.oriPrice ? Number.parseFloat(element.oriPrice) : 0
    }
    // 商品价格为最低价的那件商品的价格
    param.price = Math.min(param.price, element.price)
    if (param.price === element.price) {
      param.price = element.price
    }
    // 设置最低市场价
    param.oriPrice = param.oriPrice !== '' ? Math.min(param.oriPrice, element.oriPrice) : element.oriPrice
    if (param.oriPrice === element.oriPrice) {
      param.oriPrice = element.oriPrice
    }
    // 设置最低积分价格
    param.scorePrice = Math.min(param.scorePrice, element.skuScore)
    if (param.scorePrice === element.skuScore) {
      param.scorePrice = element.skuScore
    }

    param.totalStocks += element.stocks ? Number.parseInt(element.stocks) : 0
  }
  // 如果sku没有商品名称，则使用商品的商品名称
  // if (param.skuList.length === 1 && !param.skuList[0].skuName) {
  //   param.skuList[0].prodNameCn = dataForm.value.prodNameCn
  //   param.skuList[0].prodNameEn = dataForm.value.prodNameEn
  // }
}
const onSkuTagChangeSkuHandler = (skuList) => {
  // const prodNameCn = prodNameCn
  // const prodNameEn = prodNameEn
  const prodName = dataForm.value.prodLangList[0] ? dataForm.value.prodLangList[0].prodName : ''
  skuList.forEach(sku => {
    if (sku.properties) {
      sku.skuName = ''
      const properties = sku.properties.split(';')
      for (const propertiesKey in properties) {
        sku.skuName += properties[propertiesKey].substring(properties[propertiesKey].indexOf(':') + 1) + ' '
      }
      sku.prodName = prodName + ' ' + sku.skuName
      for (const item of dataForm.value.prodLangList) {
        sku[[`prodName_${item.lang}`]] = item.prodName + ' ' + sku.skuName
      }
      // sku.prodNameCn = prodNameCn + ' ' + sku.skuName
      // sku.prodNameEn = prodNameEn + ' ' + sku.skuName
    }
  })
  dataForm.value.skuList = skuList
}
watch(() => dataForm.value.prodLangList,
  () => {
    onSkuTagChangeSkuHandler(dataForm.value.skuList)
  },
  {
    deep: true, // 深度监听设置为 true
    immediate: true
  })
const errorMsg = (message) => {
  ElMessage({
    message,
    type: 'error',
    duration: 1500
  })
}

</script>
<style lang="scss" scoped>
.page-score-prod-info.mod-prod-info {

  // 步骤
  .post-step {
    margin-bottom: 30px;
    display: flex;
    align-content: center;
    justify-content: space-between;

    .step-item {
      position: relative;
      flex: 1;

      .step-txt {
        display: block;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
        background: #f9f9f9;
        padding: 12px 0;
      }
    }

    .step-item.active {
      .step-txt {
        color: #fff;
        background: #155bd4;
      }
    }

    // 右箭头
    .step-item:not(:last-child) {
      .step-txt {
        margin-right: 10px;
      }

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        content: '';
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-left: 10px solid #f9f9f9;
        border-bottom: 20px solid transparent;
      }
    }

    .step-item.active:not(:last-child) {
      &::after {
        border-left: 10px solid #155bd4;
      }
    }

    // 左箭头
    .step-item:not(:first-child) {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-left: 10px solid #fff;
        border-bottom: 20px solid transparent;
      }
    }
  }

  /* 每项内容的标题 */
  .title {
    margin: 5px 0 28px 0px;
    padding-left: 15px;
    background-color: #f6f6f6;
    line-height: 40px;
    font-weight: 800;
  }

  // 底部固定操作栏
  .prod-footer {
    width: calc(100% - 250px);
    left: 250px;
    position: fixed;
    bottom: 0;
    width: 93%;
    box-shadow: 0 -3px 5px #eee;
    z-index: 3;
    margin-top: 20px;
    margin-right: 20px;

    .foot {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
      background: #fff;
      box-sizing: border-box;

      .inner {
        .default-btn.save-btn {
          border-color: #155bd4;
          color: #155bd4;
        }
      }
    }
  }

  // 选择语言
  .select-lang {
    display: block;
    width: 400px;
  }

  & :deep(.el-input__inner) {
    color: #303133;
  }

  // 商品名称
  .prod-name-box {
    & :deep(.el-input__inner) {
      width: 400px;
      padding: 0 8px !important;
    }

    .prod-name-input {
      width: 400px;
    }
  }

  :deep(.el-upload--picture-card) {
    background: #ffffff;
  }

  :deep(.productImg-label) {
    .el-form-item__label:before {
      content: '*';
      color: #F56C6C;
      margin-right: 4px;
    }

    .productImg-label .el-upload--picture-card i {
      position: absolute;
      top: 39%;
      left: 37%;
    }
  }

  :deep(.el-textarea__inner:focus) {
    border-color: #c0c4cc !important;
  }

  :deep(.el-form-item__label) {
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 20px;
    padding-top: 6px;
    text-align: right;
  }

  .prod-det-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    --details-preview-width:397px;
    .prod-content {
      width: 60%;
      width: calc(100% - var(--details-preview-width) - 30px);
      margin-right: 30px;
      // 富文本编辑框样式修改
      & :deep(.tinymce-container) {

        .mce-panel,
        .mce-container-body.mce-flow-layout {
          border-color: #DCDCDC !important;
        }

        .mce-edit-area {
          border-top: 0;
        }
      }
    }

    // 详情预览
    .details-preview {
      width: 40%;
      width: var(--details-preview-width);
      border: 1px solid #DCDCDC;
      box-sizing: border-box;

      .preview-box-title {
        height: 45px;
        line-height: 45px;
        background: #f9f9f9;
        text-align: center;
        border-bottom: 1px solid #DCDCDC;
      }
      :deep(.preview-con){
        img{
          vertical-align: initial;
          font-size: initial;
        }
      }
      .preview-con {
        &::-webkit-scrollbar {
          display: none;
        }
        scrollbar-width:none;
        height: 540px;
        overflow-y: auto;
        padding: 0 10px;
        word-wrap: break-word;
        box-sizing: border-box;
      }
    }

  }
}
</style>
